import React,{useEffect,useState} from 'react'
import {View,Text,TouchableOpacity,StyleSheet,Modal,FlatList,TextInput} from 'react-native';
import { Input,Button} from '@rneui/themed';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import AsyncStorge from '@react-native-async-storage/async-storage'
import {useToDoList} from '../../context'
import '../../global'


const arr = ['背单词','专业课','学高数','起床','做阅读','背政治','睡觉','运动','数学题','上网课','吃饭','模拟题']
const Task = ({navigation}) => {
    let count=0;
    //用来判断选择器是否打开
    const [open0,setOpen0] = useState(false);
    const [open1,setOpen1]=useState(false);
    //任务时间 -开始日期
    const [begin,setBegin] = useState('');
    const [end,setEnd] = useState('');
    const [limit,setLimit] = useState(new Date());
    const [limit0,setLimit0] = useState(new Date());
    //任务名称的value值
    const [value,setValue]=useState('');
    //备注里面的内容
    const [content,setContent] = useState('');
    //模态框设置
    const [modalVisible, setModalVisible] = useState(false);
    //错误提示信息
    const [message,setMessage] = useState('');
    //provider中的todolist
    const {todoList,setToDoList} = useToDoList();

    return (
        <View style={{width:'100%',display:'flex',justifyContent:'center',alignItems:'center'}}>
            <View style={styles.view1}>
            <Input
                placeholder='请输入你的任务'
                onChangeText={text=>setValue(text)}
                value={value}
                onEndEditing={()=>console.log(value)}
                />

        <FlatList
            data={arr}
            numColumns={4}
            contentContainerStyle={{width:'100%'}}
            columnWrapperStyle={{display:'flex',alignItems:'center',justifyContent:'space-around'}}
            horizontal={false}
            key={count++}
            renderItem={({item}) => {
            return  <Button
                        title={item+' +'}
                        activeOpacity='0'
                        buttonStyle={{
                        backgroundColor:'#F5F5F5',
                        borderRadius:30
                        }}
                        titleStyle={{ color: 'grey' }}
                        containerStyle={{
                        width:changeW(160),
                        height:changeH(80),
                        marginTop:changeH(10)
                        }}
                        onPress={()=>setValue(item)}
        />
           }}
            />
        </View>
            <View style={styles.view2}>
                <View style={{display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:changeH(35)}}>
                    <Text style={{fontSize:changeW(23),marginLeft:changeW(25)}}>开始时间</Text>
                    <TouchableOpacity onPress={()=>setOpen0(true)}>
                    <TextInput style={{width:changeW(230)}} editable={false} placeholder="开始时间      >"
                    value={begin}
                    ></TextInput>
                    </TouchableOpacity>
                    
                    <DateTimePickerModal
                        mode="datetime"
                        minimumDate={new Date()}
                        isVisible={open0}
                        is24Hour={true}
                        onConfirm={(date)=>{
                            let str = '' + date.getFullYear() + '-' + (date.getMonth()+1) + '-' +  date.getDate() + '-'+date.getHours() + ':'+date.getMinutes();
                            setBegin(str);
                            setLimit(date);
                            setOpen0(false);}}
                        onCancel={()=>setOpen0(false)}
                        pickerStyle={{
                            width:changeW(200),backgroundColor:'red',height:changeH(100)
                        }}
      />
                    
                </View>
                <View style={{width:'100%',height:changeH(3),backgroundColor:'#F5F5F5',marginTop:changeH(20)}}></View>
                <View style={{display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginTop:changeH(20)}}>
                    <Text style={{fontSize:changeW(23),marginLeft:changeW(25)}}>结束时间</Text>
                    <TouchableOpacity onPress={()=>{setOpen1(true)}}>
                    <TextInput style={{width:changeW(230)}} editable={false} placeholder="结束时间      >"
                    value={end}
                    ></TextInput>
                    </TouchableOpacity>
                    
                    <DateTimePickerModal
                        mode="datetime"
                        is24Hour={true}
                        minimumDate={limit}
                        isVisible={open1}
                        onConfirm={(date)=>{
                            let str = '' + date.getFullYear() + '-' + (date.getMonth()+1) + '-' +  date.getDate()+ '-'+date.getHours() + ':'+date.getMinutes();
                            setEnd(str);
                            setLimit0(date);
                            setOpen1(false)}
                        }
                        onCancel={()=>setOpen1(false)}
                        pickerStyle={{
                            width:changeW(200),backgroundColor:'red',height:changeH(100)
                        }}/>
                </View>
                <View style={{width:'100%',height:changeH(3),backgroundColor:'#F5F5F5',marginTop:changeH(20)}}></View>
            </View>
            <View style={styles.view3}>
                <Text style={{fontSize:changeW(25),marginTop:changeH(15),marginLeft:changeW(20)}}>备注</Text>
                <TextInput 
                placeholder='请输入备注内容'
                multiline={true}
                textAlignVertical= 'top'
                maxLength={100}
                onChangeText={text=>setContent(text)}
                value={content}
                onEndEditing={()=>console.log(content)}
                style={{width:'95%',height:changeH(200),fontSize:changeW(23),borderWidth:changeW(2),borderColor:'#F5F5F5',marginLeft:changeW(20),marginTop:changeH(10),color:'black'}}
                />
            </View>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                Alert.alert("Modal has been closed.");
                setModalVisible(!modalVisible);
        }}
      >
        <View>
          <View style={{backgroundColor:'rgba(0,0,0,0.7)',borderRadius:20,
          display:'flex',justifyContent:'center',alignItems:'center',
          width:'70%',height:changeH(330),top:0.3*h,left:0.15*w}}>
            <Text style={{color:'#F5F5F5',fontSize:changeW(35),fontWeight:'bold'}}>{message}</Text>
          </View>
        </View>
      </Modal>
            <Button
                        title='添加任务'
                        activeOpacity='0'
                        buttonStyle={{
                        backgroundColor:'#1C86EE',
                        borderRadius:10
                        }}
                        titleStyle={{ color:'white' }}
                        containerStyle={{
                        width:'85%',
                        marginTop:changeH(100)
                        }}
                        onPress={() => {
                            if(value=='' && begin=='' && end==''){
                                setMessage('失败-请输入完整任务!');
                                setModalVisible(true);
                                setTimeout(()=>{
                                    setModalVisible(false);
                                },2500)
                            }
                           else if(limit>=limit0){
                                setMessage('失败-开始-结束时间设置有误！');
                                setModalVisible(true);
                                setTimeout(()=>{
                                    setModalVisible(false);
                                },2500)
                            }else{
                                setMessage('添加任务成功！')
                                setModalVisible(true);
                                setTimeout(()=>{
                                    setModalVisible(false);
                                    navigation.navigate('Home');
                                },2000)
                                let con = value;
                                let time = begin + '至' + end;
                                let obj = {
                                    content:con,
                                    finish:false,
                                    addCon:content,
                                    time:time
                                }
                                setToDoList([...todoList,obj]);
                                AsyncStorge.setItem('getToDoList',JSON.stringify([...todoList,obj]));
                                setBegin('');
                                setEnd('');
                                setContent('');
                                setValue('');
                            }
                            
                          }}
        />
        </View>
    )
}

const styles = StyleSheet.create({
    view1:{
        width:'95%',
        backgroundColor:'rgb(255,255,255)',
        height:changeH(420),
        marginTop:changeH(50),
        borderRadius:20
    },
    view2:{
        width:'95%',
        backgroundColor:'rgb(255,255,255)',
        height:changeH(230),
        marginTop:changeH(20),
        borderRadius:20
    },
    view3:{
        width:'95%',
        backgroundColor:'rgb(255,255,255)',
        height:changeH(320),
        marginTop:changeH(20),
        borderRadius:20
    }
})

export default Task
